﻿<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Home</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		
        <!-- all css here -->
        <!-- bootstrap v3.3.6 css -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- animate css -->
        <link rel="stylesheet" href="css/animate.css">
        <!-- jquery-ui.min css -->
        <link rel="stylesheet" href="css/jquery-ui.min.css">
        <!-- meanmenu css -->
        <link rel="stylesheet" href="css/meanmenu.min.css">
        <!-- nivo slider css -->
        <link rel="stylesheet" href="lib/css/nivo-slider.css" type="text/css" />
        <link rel="stylesheet" href="lib/css/preview.css" type="text/css" />
        <!-- owl.carousel css -->
        <link rel="stylesheet" href="css/owl.carousel.css">
        <!-- font-awesome css -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <!-- style css -->
        <link rel="stylesheet" href="style.css">
        <!-- responsive css -->
        <link rel="stylesheet" href="css/responsive.css">
        <!-- modernizr js -->
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>




        <!--header top area start-->
        <div class="header_area">
            <div class="header_border">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
                            <div class="header_heaft_area">
                                <div class="header_left_all">
                                    <div class="mean_al_dv">
                                        <div class="littele_menu"><a href="#">Language: English <i class="fa fa-caret-down"></i></a> </div>
                                        <ul class="option">
                                            <li><a href="#">France</a></li>
                                            <li><a href="#">Germany</a></li>
                                            <li><a href="#">Japanese</a></li>
                                        </ul>
                                    </div>
                                    <div class="usd_area">
                                        <div class="littele_menu"><a href="#">
                                            Currency: USD
                                            <i class="fa fa-caret-down"></i>
                                            </a>
                                        </div>
                                        <ul class="option">
                                            <li><a href="#">EUR - Euro</a></li>
                                            <li><a href="#">GBP - British Pound</a></li>
                                            <li><a href="#">INR - Indian Rupee</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
                            <div class="header_right_area">
                                <ul>
                                    <li>
                                        <a class="account" href="my.account.html">My Account</a>
                                    </li>
                                    <li>
                                        <a class="wishlist" href="contact-us.html">wishlist</a>
                                    </li>
                                    <li>
                                        <a class="Shopping cart" href="cart.html">Shopping cart</a>
                                    </li>
                                    <li>
                                        <a class="Checkout" href="cart.html">Checkout</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--header top area end-->
            <!--header middle area start-->
            <div class="header_middle">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="logo_area">
                                <a href="index.html"><img src="img/logo-pic/logo.png" alt="" /></a>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="header_all search_box_area">
                                <form class="new_search" role="search" method="get" action="#">
                                    <input id="mix_search" class="search-field" placeholder="Search Products…" value="" name="s" title="Search for:" type="search">
                                    <input value="Search" type="submit">
                                    <input name="post_type" value="product" type="hidden">
                                </form>
                            </div>
                            <div class="header_all shopping_cart_area">
                                <div class="widget_shopping_cart_content">
                                    <div class="topcart">
                                        <a class="cart-toggler" href="">
                                            <i class="icon"></i>
                                            <span class="my-cart">Shopping cart</span>
                                            <span class="qty">2 Items</span>
                                            <span class="fa fa-angle-down"></span>
                                        </a>
                                        <div class="new_cart_section">
                                            <ol class="new-list">
                                                <!-- single item -->
                                                <li class="wimix_area">
                                                    <a class="pix_product" href="">
                                                        <img alt="" src="img/product-pic/7-150x98.jpg">
                                                    </a>
                                                    <div class="product-details">
                                                        <a href="#">Adipiscing cursus eu</a>
                                                        <span class="sig-price">1×$300.00</span>
                                                    </div>
                                                    <div class="cart-remove">
                                                        <a class="action" href="#">
                                                            <i class="fa fa-close"></i>
                                                        </a>
                                                    </div>
                                                </li>
                                                <!-- single item -->
                                                <!-- single item -->
                                                <li class="wimix_area">
                                                    <a class="pix_product" href="#">
                                                    <img alt="" src="img/product-pic/1-150x98.jpg">
                                                    </a>
                                                    <div class="product-details">
                                                        <a href="#">Duis convallis</a>
                                                        <span class="sig-price">1×$100.00</span>
                                                    </div>
                                                    <div class="cart-remove">
                                                        <a class="action" href="#">
                                                            <i class="fa fa-close"></i>
                                                        </a>
                                                    </div>
                                                </li>
                                                <!-- single item -->
                                            </ol>
                                            <div class="top-subtotal">
                                                Subtotal: <span class="sig-price">$400.00</span>
                                            </div>
                                            <div class="cart-button">
                                                <ul>
                                                    <li>
                                                        <a href="cart.html">View my cart <i class="fa fa-angle-right"></i></a>
                                                    </li>
                                                    <li>
                                                        <a href="cart.html">Checkout <i class="fa fa-angle-right"></i></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--header footer area start-->
            <div class="all_menu_area">
                <div class="menu_inner">
                    <div class="container">
                        <div class="full_menu clearfix">
                            <div class="new_menu">
                                <div class="drp-menu">
                                    <div class="col-md-3 pr pl">
                                        <div class="all_catagories">
                                            <div class="enable_catagories">
                                                <i class="fa fa-bars"></i>
                                                <span>All Categories</span>
                                                <i class="fa fa-angle-down"></i>
                                            </div>
                                        </div>
                                        <div class="catagory_menu_area">
                                            <div class="catagory_mega_menu">
                                                <div class="cat_mega_start">
                                                    <ul class="list">
                                                        <li class="next_area">
                                                            <a class="item_link" href="#">
                                                                <i class="fa fa-television"></i>
                                                                <span class="link_content">
                                                                    <span class="link_text">
                                                                        Electronics
                                                                        <span class="link_descr">Praesent accumsan elementum maximus </span>
                                                                    </span>
                                                                </span>
                                                            </a>
                                                            <ul class="electronics_drpdown">
                                                                <li class="parent">
                                                                    <a href="#"></a>
                                                                    <div class="mega_menu">
                                                                        <div class="mega_menu_coloumn">
                                                                            <ul>
                                                                                <li><a href="#">Men's</a></li>
                                                                                <li><a href="#">Hats</a></li>
                                                                                <li><a href="#">Mirriors</a></li>
                                                                                <li><a href="#">Singles</a></li>
                                                                            </ul>
                                                                        </div>
                                                                        <div class="mega_menu_coloumn">
                                                                            <ul>
                                                                                <li><a href="#">Sports& Outdoors</a></li>
                                                                                <li><a href="#">Smartphones</a></li>
                                                                                <li><a href="#">Womens</a></li>
                                                                                <li><a href="#">Health & Beauty</a></li>
                                                                            </ul>
                                                                        </div>
                                                                        <div class="mega_menu_coloumn">
                                                                            <ul>
                                                                                <li class="mega_content"><a href="#">Accessories</a></li>
                                                                                <li><a href="#">Hobbies</a></li>
                                                                                <li><a href="#">networking</a></li>
                                                                                <li><a href="#">accessories</a></li>
                                                                                <li><a href="#">electronics</a></li>
                                                                            </ul>
                                                                        </div>
                                                                        <div class="mega_menu_coloumn">
                                                                            <ul>
                                                                                <li><a href="#">Laptops & Accessories</a></li>
                                                                                <li><a href="#">hoodies</a></li>
                                                                                <li><a href="#">watches</a></li>
                                                                                <li><a href="#">flashlights</a></li>
                                                                                <li><a href="#">mirriors</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                        <li class="differ_sec_area">
                                                            <a class="item_link" href="#">
                                                                <i class="fa fa-mobile"></i>
                                                                <span class="link_content">
                                                                    <span class="link_text">
                                                                        Smartphone & Tablets
                                                                        <span class="link_descr">Praesent accumsan elementum maximus </span>
                                                                    </span>
                                                                </span>
                                                            </a>
                                                            <ul class="another_drop_menu">
                                                                <li class="discrip">
                                                                    <a class="new_link_2 with_icon" href="#" tabindex="1">Posters</a>
                                                                    <ul class="new_miup_menu">
                                                                        <li>
                                                                            <ul class="new_mixup_tm">
                                                                                <li class="exact">
                                                                                    <a class="new_link_8 with_icon" href="#" tabindex="1">Cocktail</a>
                                                                                    <ul class="decent_mean_menu">
                                                                                        <li>
                                                                                            <ul class="new_mixup_tm">
                                                                                                <li>
                                                                                                    <a href="#"></a>Cost & Jackets
                                                                                                </li>
                                                                                            </ul>
                                                                                        </li>
                                                                                    </ul>
                                                                                </li>
                                                                                <li><a href="#">Furniture</a></li>
                                                                            </ul>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                                <li class="risk">
                                                                    <a class="new_link_2 new_link_3 with_icon" href="#" tabindex="1">Watches
                                                                    </a>
                                                                    <ul class="new_miup_menu">
                                                                        <li>
                                                                            <ul class="new_mixup_tm">
                                                                                <li><a href="#">Women's</a></li>
                                                                            </ul>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                                <li><a href="#">Pendants</a></li>
                                                                <li><a href="#">Chocklates</a></li>
                                                            </ul>
                                                        </li>
                                                        <li class="differ_sec_area">
                                                            <a class="item_link " href="#">
                                                                <i class="fa fa-gift"></i>
                                                                <span class="link_content">
                                                                    <span class="link_text">
                                                                        Health & Beauty
                                                                        <span class="link_descr">Praesent accumsan elementum maximus</span>
                                                                    </span>
                                                                </span>
                                                            </a>
                                                            <ul class="another_drop_menu">
                                                                <li class="discrip">
                                                                    <a class="new_link_2 new_link_4 with_icon" href="#" tabindex="1">
                                                                        <i class="fa fa-futbol-o"></i>
                                                                        Sports & Outdoors
                                                                    </a>
                                                                </li>
                                                                <li class="discrip">
                                                                    <a class="new_link_2 new_link_4 with_icon" href="#" tabindex="1">
                                                                        <i class="fa fa-bullseye"></i>
                                                                        Bags, Shoes & Accessories
                                                                    </a>
                                                                </li>
                                                                <li class="discrip"><a class="new_link_2 new_link_4 with_icon" href="#" tabindex="1"><i class="fa fa-file-image-o"></i>
                                                                    Toys & Hobbies</a>
                                                                </li>
                                                                <li class="discrip">
                                                                    <a class="new_link_2 new_link_4 with_icon" href="#" tabindex="1"><i class="fa fa-television"></i>
                                                                    Computer & Networking</a>
                                                                </li>
                                                                <li class="discrip">
                                                                    <a class="new_link_2 new_link_4 with_icon" href="#" tabindex="1">
                                                                        <i class="fa fa-laptop"></i>
                                                                        Laptops & Accessories
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                        <li>
                                                            <a class="item_link item_link_2" href="#">
                                                                <i class="fa fa-heart"></i>
                                                                <span class="link_content">
                                                                    <span class="link_text">
                                                                        Jewelry & Watches
                                                                        <span class="link_descr">Praesent accumsan elementum maximus</span>
                                                                    </span>
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="item_link item_link_2" href="#">
                                                                <i class="fa fa-star"></i>
                                                                <span class="link_content">
                                                                    <span class="link_text">
                                                                        Flashlights & Lamps
                                                                        <span class="link_descr">Praesent accumsan elementum maximus</span>
                                                                    </span>
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="item_link item_link_2" href="#">
                                                                <i class="fa fa-lightbulb-o"></i>
                                                                <span class="link_content">
                                                                    <span class="link_text">
                                                                        Headlight
                                                                        <span class="link_descr">Praesent accumsan elementum maximus</span>
                                                                    </span>
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li class="cost-menu">
                                                            <a class="item_link item_link_2" href="#">
                                                                <i class="fa fa-pie-chart"></i>
                                                                <span class="link_content">
                                                                    <span class="link_text">
                                                                        Cost & jackets
                                                                        <span class="link_descr">Praesent accumsan elementum maximus </span>
                                                                    </span>
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li class="showmore-items shwitm">
                                                            <i class="fa fa-plus-square-o"></i>
                                                            <span>More Categories</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--menu area start-->
                                    <div class="col-md-9 pl">
                                        <div class="menu_area">
                                            <div class="menu">
                                                <nav>
                                                    <ul>
                                                        <li><a href="index.html">Home</a></li>
														<li><a href="about-us.html">About</a></li>
														<li><a href="cart.html">Cart</a></li>
														<li><a href="list-view.html">List</a></li>
														<li><a href="my.account.html">Account</a></li>
														<li><a href="simple-product.html">Product</a></li>
                                                        <li><a href="address.html">Addresses</a></li>
														<li><a href="contact-us.html">Contact us</a></li>
                                                    </ul>
                                                </nav>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- mobile-menu-area-start -->
        <div class="mobile-menu-area hidden-md hidden-lg">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="mobile-menu">
                            <nav id="mobile-menu-active">
                                <ul id="nav">
                                    <li><a href="index.html">Home</a></li>
									<li><a href="about-us.html">About</a></li>
									<li><a href="cart.html">Cart</a></li>
									<li><a href="list-view.html">List</a></li>
									<li><a href="my.account.html">Account</a></li>
									<li><a href="simple-product.html">Product</a></li>
                                    <li><a href="address.html">Addresses</a></li>
									<li><a href="contact-us.html">Contact us</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- mobile-menu-area-end -->
        <!--slider area start-->
        <section class="slider-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="bend niceties preview-2">
                            <div id="ensign-nivoslider" class="slides">
                                <img src="img/slider/slider1_1-1.jpg" alt="" title="#slider-caption-1" />
                                <img src="img/slider/slider1_2.jpg" alt="" title="#slider-caption-2" />
                            </div>
                            <!-- direction 1 -->
                            <div id="slider-caption-1" class="t-cn slider-direction slider-one">
                                <div class="slider-progress"></div>
                                <div class="tld-f1">
                                    <div class="layer-1-1 animated fadeInDown">
                                        <h1> $320.00</h1>
                                    </div>
                                    <div class="layer-1-2 animated flipInX">
                                        <h2>$245.00</h2>
                                    </div>
                                    <div class="layer-1-3 animated rotateInUpLeft">
                                        <h1>NOKIA E600</h1>
                                    </div>
                                    <div class="layer-1-4  animated rotateInUpLeft">
                                        <h3>SALE UO TO 30%</h3>
                                    </div>
                                    <div class="layer-1-5 animated rotateInUpLeft">
                                        <a href="#">Shopping Now</a>
                                    </div>
                                </div>
                                <div class="tld-f2">
                                    <div class="layer-1-6 animated zoomIn">
                                        <img src="img/slider/slider_8.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- direction 2 -->
                            <div id="slider-caption-2" class="slider-direction slider-two">
                                <div class="slider-progress"></div>
                                <div class="sld-fl">
                                    <div class="layer-2-1 animated fadeInLeftBig">
                                        <h1> $320.00</h1>
                                    </div>
                                    <div class="layer-2-2 animated slideInLeft">
                                        <h2>$245.00</h2>
                                    </div>
                                    <div class="layer-2-3 animated slideInLeft">
                                        <h1>MEN'S </h1>
                                    </div>
                                    <div class="layer-2-4 animated slideInLeft">
                                        <h3>SALE UO TO 30%</h3>
                                    </div>
                                    <div class="layer-2-5 animated bounceInUp">
                                        <a href="#">Shopping Now</a>
                                    </div>
                                </div>
                                <div class="sld-fr">
                                    <div class="layer-2-6 animated zoomIn">
                                        <img src="img/slider/slider-9.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--slider area end-->
        <div>
            <div class="cosmatics_heading">
                <h3 class="cosmatics_products">
                    <i class="fa fa-tags"></i>
                    <span>Hot deals</span>
                </h3>
            </div>
            <div id="hot-products"></div>
        </div>

        <div>
            <div class="new_product">
                <div class="product_heading">
                    <i class="fa fa-play-circle"></i>
                    <span>New products</span>
                </div>
            </div>
            <div id="new-products"></div>
        </div>

        <div>
            <div class="new_product">
                <div class="product_heading">
                    <i class="fa fa-star"></i>
                    <span>IDEA PRODUCTS</span>
                </div>
            </div>
            <div id="idea-products"></div>
        </div>

        <!--social design arae start-->
        <div class="link_area">
            <div class="container">
                <div class="row">
                    <div class="social_design on_right">
                        <ul>
                            <li>
                                <a class="facebook" target="_blank" href="#facebook">
                                    <span>
                                        <i class="fa fa-facebook"></i>
                                        <span class="social-text">Follow via Facebook</span>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a class="twitter" target="_blank" href="#twitter.com">
                                    <span>
                                        <i class="fa fa-twitter"></i>
                                        <span class="social-text">Follow via Twitter</span>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a class="google-plus" target="_blank" href="#google-plus">
                                    <span>
                                        <i class="fa fa-google-plus"></i>
                                        <span class="social-text">Follow via Google +</span>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a class="youtube" target="_blank" href="#youtube">
                                    <span>
                                        <i class="fa fa-youtube"></i>
                                        <span class="social-text">Follow via Youtube</span>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a class="pinterest" target="_blank" href="#pinterest">
                                    <span>
                                        <i class="fa fa-pinterest"></i>
                                        <span class="social-text">Follow via Pinterest</span>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a class="mail-to" target="_blank" href="mailto:lionthemes88@gmail.com">
                                    <span>
                                        <i class="fa fa-envelope-o"></i>
                                        <span class="social-text">Mail To Us</span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--social design arae end-->
        <!--about us area-->
        <div class="about_us_area">
            <div class="about_main">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="about_all">
                                <div class="single_about">
                                    <div class="about_icon">
                                        <span class="fa fa-truck"></span>
                                    </div>
                                    <div class="about_content">
                                        <div class="about_text">Free Shipping</div>
                                        <div class="about_prgph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend libero felis, at interdum lorem efficitur et.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="about_all">
                                <div class="single_about">
                                    <div class="about_icon">
                                        <span class="fa fa-history"></span>
                                    </div>
                                    <div class="about_content">
                                        <div class="about_text">Free Shipping</div>
                                        <div class="about_prgph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend libero felis, at interdum lorem efficitur et.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="about_all">
                                <div class="single_about">
                                    <div class="about_icon">
                                        <span class="fa fa-lock"></span>
                                    </div>
                                    <div class="about_content">
                                        <div class="about_text">Free Shipping</div>
                                        <div class="about_prgph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend libero felis, at interdum lorem efficitur et.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--about us end-->
        <!--footer top area start-->
        <div class="footer_area">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="footer_menu">
                            <div class="news_heading_2">
                                <h3>Information </h3>
                            </div>
                            <div class="footer_menu">
                                <ul>
                                    <li>
                                        <a href="#">our blog</a>
                                    </li>
                                    <li>
                                        <a href="#">about our shop</a>
                                    </li>
                                    <li>
                                        <a href="#">secure shopping</a>
                                    </li>
                                    <li>
                                        <a href="#">privecy policy</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="footer_menu">
                            <div class="news_heading_2">
                                <h3>My Account </h3>
                            </div>
                            <div class="footer_menu">
                                <ul>
                                    <li>
                                        <a href="my.account.html">My Account</a>
                                    </li>
                                    <li>
                                        <a href="contact-us.html">Wishlist</a>
                                    </li>
                                    <li>
                                        <a href="cart.html">Shopping Cart</a>
                                    </li>
                                    <li>
                                        <a href="about-us.html">Checkout</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="footer_menu">
                            <div class="news_heading_2">
                                <h3> Our Services </h3>
                            </div>
                            <div class="footer_menu">
                                <ul>
                                    <li>
                                        <a href="#">Shipping & Returns</a>
                                    </li>
                                    <li>
                                        <a href="#">Secure Shopping</a>
                                    </li>
                                    <li>
                                        <a href="#">International Shipping</a>
                                    </li>
                                    <li>
                                        <a href="#">Affiliates</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="footer_menu footer_menu_2">
                            <div class="news_heading_2">
                                <h3> Store Information </h3>
                            </div>
                            <ul>
                                <li>
                                    <i class="fa fa-home"></i>
                                    <p>My Company : 42 avenue des Champs Elysées 75000  France</p>
                                </li>
                                <li>
                                    <i class="fa fa-phone"></i>
                                    <p>Phone: (0123) 456789</p>
                                </li>
                                <li>
                                    <i class="fa fa-envelope"></i>
                                    <p>Email: admin@hastech.company</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--footer top area end-->
            <!--footer middle area start-->
            <div class="footer_middle">
                <div class="container">
                    <div class="fotter_inner">
                        <div class="middele_pic">
                            <img src="img/icon/payment-300x30.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--footer middle area end-->
        <!--footer bottom area start-->
        <div class="footer-bottom">
            <div class="container">
                <div class="widget-copyright text-center">
                    Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                </div>
            </div>
        </div>
        <!--footer bottom area end-->
        <!--modal content start-->
        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog modal-dialog-2">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="modal-product">
                            <div class="row">
                                <div class="new_port new_port_2">
                                    <div class="port_pix">
                                        <img src="img/product-pic/product_pic_2.jpg" alt="" id="modal-image">
                                    </div>
                                </div>
                                <div class="elav_titel elav_titel_2">
                                    <div class="elv_heading elv_heading_therteen">
                                        <h3 id="modal-title">Donec non est at</h3>
                                    </div>
                                    <div class="elav_info">
                                        <div class="price_box price_box_pb">
                                            <span class="spical-price spical-price-nk" id="modal-price">$250.00</span>
                                        </div>
                                        <form class="cart-btn-area cart-btn-area-dec" action="#">
                                            <a class="see-all" href="#">See all features</a><br>
                                            <input type="number" value="1">
                                            <button class="add-tocart add-tocart-2" type="submit">Add to cart</button>
                                        </form>
                                    </div>
                                    <div class="evavet_description evavet_description_dec">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere metus vitae arcu imperdiet, id aliquet ante scelerisque. Sed sit amet sem vitae urna fringilla tempus.</p>
                                    </div>
                                    <div class="elavetor_social">
                                        <h3 class="widget-title">Share this product</h3>
                                        <br>
                                        <ul class="social-link social-link-bbt">
                                            <li><a class="fb" data-original-title="facebook" href="#" title="" data-toggle="tooltip"><i class="fa fa-facebook"></i></a></li>
                                            <li><a class="twit" data-original-title="twitter" href="#" title="" data-toggle="tooltip"><i class="fa fa-twitter"></i></a></li>
                                            <li><a class="pinter" data-original-title="pinterest" href="#" title="" data-toggle="tooltip"><i class="fa fa-pinterest"></i></a></li>
                                            <li><a class="google+" href="#" title="Google+" data-target="#productModal" data-toggle="tooltip"><i class="fa fa-google-plus"></i></a></li>
                                            <li><a class="lindin" href="#" title="LinkedIn" data-target="#productModal" data-toggle="tooltip"><i class="fa fa-linkedin"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--modal content end-->
		
		
		
		
		
		
        <!-- all js here -->
        <!-- jquery latest version -->
        <script src="js/vendor/jquery-1.12.0.min.js"></script>
        <!-- bootstrap js -->
        <script src="js/bootstrap.min.js"></script>
        <!-- nivo slider js -->
        <script src="lib/js/jquery.nivo.slider.js" type="text/javascript"></script>
        <script src="lib/home.js" type="text/javascript"></script>
        <!-- owl.carousel js -->
        <script src="js/owl.carousel.min.js"></script>
        <!-- meanmenu js -->
        <script src="js/jquery.meanmenu.js"></script>
        <!-- jquery-ui js -->
        <script src="js/jquery-ui.min.js"></script>
        <!-- easing js -->
        <script src="js/jquery.easing.1.3.js"></script>
        <!-- mixitup js -->
        <script src="js/jquery.mixitup.min.js"></script>
        <!-- jquery.countdown js -->
        <script src="js/jquery.countdown.min.js"></script>
        <!-- wow js -->
        <script src="js/wow.min.js"></script>
        <!-- popup js -->
        <script src="js/jquery.magnific-popup.min.js"></script> 
        <!-- plugins js -->
        <script src="js/plugins.js"></script>
        <!-- main js -->
        <script src="js/main.js"></script>

            <script type="text/javascript">
                $(document).ready(function() {
                    showNewList();
                    showHotList();
                    showideaList();
                });


                function showNewList(url) {
                    $("#new-products").empty();
                    $.ajax({
                        url: "/products/new_list",
                        type: "GET",
                        dataType: "JSON",
                        success: function(json) {
                            let list = json.data;
                            console.log("count=" + list.length);
                            for (let i = 0; i < list.length; i++) {
                                console.log(list[i].title);
                                let html ='<div class="owl-item" style="width: 293px;">' +
                                    '<div class="col-md-12">' +
                                    '<div class="all-pros  all-pros-2 animated fadeInUp">' +
                                    '    <div class="single_product">' +
                                    '        <span>New</span>' +
                                    '    </div>' +
                                    '    <div class="sinle_pic">' +
                                    '        <a href="#">' +
                                    '        <img class="primary-img" src="..#{image}collect.png" alt="" />' +
                                    '        <img class="secondary-img" src="..#{image}collect.png" alt="" />' +
                                    '        </a>' +
                                    '    </div>' +
                                    '    <div class="product-action" data-toggle="modal" data-target="#myModal">' +
                                    '        <button type="button" class="btn btn-info btn-lg quickview" data-toggle="tooltip" title="Quickview" >Quick View</button>   ' +
                                    '    </div>' +
                                    '    <div class="product_content">' +
                                    '        <div class="usal_pro">' +
                                    '            <div class="product_name_2">' +
                                    '                <h2>' +
                                    '                    <a href="simple-product.html?id=#{id}">#{title}</a>' +
                                    '                </h2>' +
                                    '            </div>' +
                                    '            <div class="product_price">' +
                                    '                <div class="price_rating">' +
                                    '                    <a href="#"><i class="fa fa-star"></i></a>' +
                                    '                    <a href="#"><i class="fa fa-star"></i></a>' +
                                    '                    <a href="#">' +
                                    '                    <i class="fa fa-star"></i>' +
                                    '                    </a>' +
                                    '                    <a href="#"><i class="fa fa-star"></i>' +
                                    '                    </a>' +
                                    '                    <a class="not-rated" href="#">' +
                                    '                    <i class="fa fa-star-o"></i>' +
                                    '                    </a>' +
                                    '                </div>' +
                                    '            </div>' +
                                    '            <div class="price_box">' +
                                    '                <span class="spical-price">￥#{price}</span>' +
                                    '            </div>' +
                                    '            <div class="last_button_area">' +
                                    '                <ul class="add-to-links clearfix">' +
                                    '                    <li class="addwishlist">' +
                                    '                        <div class="yith-wcwl-add-button show" >' +
                                    '                            <a class="add_to_wishlist" href="" rel="nofollow" data-product-id="45" data-product-type="external" data-toggle="tooltip" title="" data-original-title="Add to Wishlist"><i                                                class="fa fa-heart"></i></a>' +
                                    '                        </div>' +
                                    '                    </li>' +
                                    '                    <li>' +
                                    '                        <div class="new_act">' +
                                    '                            <a class="button_act" data-quick-id="45" href="simple-product.html?id=#{id}" title="" data-toggle="tooltip" data-original-title="Donec non est at">Add To Cart</a>' +
                                    '                        </div>' +
                                    '                    </li>' +
                                    '                    <li class="addcompare">' +
                                    '                        <div class="woocommerce product compare-button">' +
                                    '                            <a class="compare button" href="" data-product_id="45" rel="nofollow" data-toggle="tooltip" title="" data-original-title="Compare"><i class="fa fa-refresh"></i></a>' +
                                    '                        </div>' +
                                    '                    </li>' +
                                    '                </ul>' +
                                    '            </div>' +
                                    '        </div>' +
                                    '    </div>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>'
                                html= html.replace(/#{id}/g, list[i].id);
                                html= html.replace(/#{title}/g, list[i].title);
                                html= html.replace(/#{price}/g, list[i].price);
                                html= html.replace(/#{image}/g, list[i].image);
                                $("#new-products").append(html);
                            }
                        }
                    });
                }

                function showHotList() {
                    $("#hot-products").empty();
                    $.ajax({
                        url: "/products/hot_list",
                        type: "GET",
                        dataType: "JSON",
                        success: function(json) {
                            let list = json.data;
                            console.log("count=" + list.length);
                            for (let i = 0; i < list.length; i++) {
                                console.log(list[i].title);
                                let html ='<div class="owl-item" style="width: 293px;">' +
                                    '<div class="col-md-12">' +
                                    '<div class="all-pros  all-pros-2 animated fadeInUp">' +
                                    '    <div class="single_product">' +
                                    '        <span>New</span>' +
                                    '    </div>' +
                                    '    <div class="sinle_pic">' +
                                    '        <a href="#">' +
                                    '        <img class="primary-img" src="..#{image}collect.png" alt="" />' +
                                    '        <img class="secondary-img" src="..#{image}collect.png" alt="" />' +
                                    '        </a>' +
                                    '    </div>' +
                                    '    <div class="product-action" data-toggle="modal" data-target="#myModal">' +
                                    '        <button type="button" class="btn btn-info btn-lg quickview" data-toggle="tooltip" title="Quickview">Quick View</button>   ' +
                                    '    </div>' +
                                    '    <div class="product_content">' +
                                    '        <div class="usal_pro">' +
                                    '            <div class="product_name_2">' +
                                    '                <h2>' +
                                    '                    <a href="simple-product.html?id=#{id}">#{title}</a>' +
                                    '                </h2>' +
                                    '            </div>' +
                                    '            <div class="product_price">' +
                                    '                <div class="price_rating">' +
                                    '                    <a href="#"><i class="fa fa-star"></i></a>' +
                                    '                    <a href="#"><i class="fa fa-star"></i></a>' +
                                    '                    <a href="#">' +
                                    '                    <i class="fa fa-star"></i>' +
                                    '                    </a>' +
                                    '                    <a href="#"><i class="fa fa-star"></i>' +
                                    '                    </a>' +
                                    '                    <a class="not-rated" href="#">' +
                                    '                    <i class="fa fa-star-o"></i>' +
                                    '                    </a>' +
                                    '                </div>' +
                                    '            </div>' +
                                    '            <div class="price_box">' +
                                    '                <span class="spical-price">￥#{price}</span>' +
                                    '            </div>' +
                                    '            <div class="last_button_area">' +
                                    '                <ul class="add-to-links clearfix">' +
                                    '                    <li class="addwishlist">' +
                                    '                        <div class="yith-wcwl-add-button show" >' +
                                    '                            <a class="add_to_wishlist" href="" rel="nofollow" data-product-id="45" data-product-type="external" data-toggle="tooltip" title="" data-original-title="Add to Wishlist"><i                                                class="fa fa-heart"></i></a>' +
                                    '                        </div>' +
                                    '                    </li>' +
                                    '                    <li>' +
                                    '                        <div class="new_act">' +
                                    '                            <a class="button_act" data-quick-id="45" href="simple-product.html?id=#{id}" title="" data-toggle="tooltip" data-original-title="Donec non est at">Add To Cart</a>' +
                                    '                        </div>' +
                                    '                    </li>' +
                                    '                    <li class="addcompare">' +
                                    '                        <div class="woocommerce product compare-button">' +
                                    '                            <a class="compare button" href="" data-product_id="45" rel="nofollow" data-toggle="tooltip" title="" data-original-title="Compare"><i class="fa fa-refresh"></i></a>' +
                                    '                        </div>' +
                                    '                    </li>' +
                                    '                </ul>' +
                                    '            </div>' +
                                    '        </div>' +
                                    '    </div>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>'
                                html= html.replace(/#{id}/g, list[i].id);
                                html= html.replace(/#{title}/g, list[i].title);
                                html= html.replace(/#{price}/g, list[i].price);
                                html= html.replace(/#{image}/g, list[i].image);
                                $("#hot-products").append(html);
                            }
                        }
                    });
                }

                function showideaList() {
                    $("#idea-products").empty();
                    $.ajax({
                        url: "/products/idea_list",
                        type: "GET",
                        dataType: "JSON",
                        success: function(json) {
                            let list = json.data;
                            console.log("count=" + list.length);
                            for (let i = 0; i < list.length; i++) {
                                console.log(list[i].title);
                                let html ='<div class="owl-item" style="width: 293px;">' +
                                    '<div class="col-md-12">' +
                                    '<div class="all-pros  all-pros-2 animated fadeInUp">' +
                                    '    <div class="single_product">' +
                                    '        <span>New</span>' +
                                    '    </div>' +
                                    '    <div class="sinle_pic">' +
                                    '        <a href="#">' +
                                    '        <img class="primary-img" src="..#{image}collect.png" alt="" />' +
                                    '        <img class="secondary-img" src="..#{image}collect.png" alt="" />' +
                                    '        </a>' +
                                    '    </div>' +
                                    '    <div class="product-action" data-toggle="modal" data-target="#myModal">' +
                                    '        <button type="button" class="btn btn-info btn-lg quickview" data-toggle="tooltip" title="Quickview" onclick="showModal()">Quick View</button>   ' +
                                    '    </div>' +
                                    '    <div class="product_content">' +
                                    '        <div class="usal_pro">' +
                                    '            <div class="product_name_2">' +
                                    '                <h2>' +
                                    '                    <a href="simple-product.html?id=#{id}">#{title}</a>' +
                                    '                </h2>' +
                                    '            </div>' +
                                    '            <div class="product_price">' +
                                    '                <div class="price_rating">' +
                                    '                    <a href="#"><i class="fa fa-star"></i></a>' +
                                    '                    <a href="#"><i class="fa fa-star"></i></a>' +
                                    '                    <a href="#">' +
                                    '                    <i class="fa fa-star"></i>' +
                                    '                    </a>' +
                                    '                    <a href="#"><i class="fa fa-star"></i>' +
                                    '                    </a>' +
                                    '                    <a class="not-rated" href="#">' +
                                    '                    <i class="fa fa-star-o"></i>' +
                                    '                    </a>' +
                                    '                </div>' +
                                    '            </div>' +
                                    '            <div class="price_box">' +
                                    '                <span class="spical-price">￥#{price}</span>' +
                                    '            </div>' +
                                    '            <div class="last_button_area">' +
                                    '                <ul class="add-to-links clearfix">' +
                                    '                    <li class="addwishlist">' +
                                    '                        <div class="yith-wcwl-add-button show" >' +
                                    '                            <a class="add_to_wishlist" href="" rel="nofollow" data-product-id="45" data-product-type="external" data-toggle="tooltip" title="" data-original-title="Add to Wishlist"><i                                                class="fa fa-heart"></i></a>' +
                                    '                        </div>' +
                                    '                    </li>' +
                                    '                    <li>' +
                                    '                        <div class="new_act">' +
                                    '                            <a class="button_act" data-quick-id="45" href="simple-product.html?id=#{id}" title="" data-toggle="tooltip" data-original-title="Donec non est at">Add To Cart</a>' +
                                    '                        </div>' +
                                    '                    </li>' +
                                    '                    <li class="addcompare">' +
                                    '                        <div class="woocommerce product compare-button">' +
                                    '                            <a class="compare button" href="" data-product_id="45" rel="nofollow" data-toggle="tooltip" title="" data-original-title="Compare"><i class="fa fa-refresh"></i></a>' +
                                    '                        </div>' +
                                    '                    </li>' +
                                    '                </ul>' +
                                    '            </div>' +
                                    '        </div>' +
                                    '    </div>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>'
                                html= html.replace(/#{id}/g, list[i].id);
                                html= html.replace(/#{title}/g, list[i].title);
                                html= html.replace(/#{price}/g, list[i].price);
                                html= html.replace(/#{image}/g, list[i].image);
                                $("#idea-products").append(html);
                            }
                        }
                    });
                }
            </script>
    <script type="text/javascript">
        function showModal(id, title, price, image){
            $("#myModal").on("show.bs.modal", function (e) {
            $("modal-id").html(id);
            $("#modal-title").html(title);
            $("#modal-price").html(price);
            $("#modal-imgae").src=(image);
        })}
    </script>
    </body>
    <style>
        #new-products{
            display: flex;
            justify-content: space-around;
        }
        #hot-products{
            display: flex;
            justify-content: space-around;
        }
        #idea-products{
            display: flex;
            justify-content: space-around;
        }
    </style>
</html>


